<script lang="tsx">
import { Component, Vue, Prop } from 'vue-property-decorator'

@Component({
  name: 'DropdownItem',
})
export default class extends Vue {
  render() {
    return (
      <a
        class={{
          'dropdown-item': true,
          'selected': this.selected,
        }}
        href={ this.href }
        target={ this.target }
        onClick={ this.handleClick }
      >
        { this.$slots.default }
      </a>
    )
  }

  @Prop({ type: String, default: 'javascript:void(0)' }) href!:string

  @Prop({ type: String, default: '' }) target!:string

  @Prop({ type: Boolean, default: false }) selected!:boolean

  handleClick() {
    this.$emit('click')
  }
}
</script>

<style lang="scss">
.dropdown-item {
  display: block;
  white-space: nowrap;
  font-size: 13px;
  color: #777;
  padding: 5px 10px;
  transition: all 200ms;
  &:hover, &.selected {
    background-color: #dfdfdf;
    color: #333;
  }
}
</style>
